<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>商品主图</title>
	<!-- 引入vue以及element-ui样式 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<!-- 引入axios -->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	
	
	<style>
	  .el-table .warning-row {
	    background: oldlace;
	  }
	
	  .el-table .success-row {
	    background: #f0f9eb;
	  }
	  .app{
		  font-family: '微软雅黑';
	  }
	  </style>
</head>
<body>
	<div class="app">
		<el-row>
			<el-breadcrumb separator-class="el-icon-arrow-right">
			  <el-breadcrumb-item><font style="font-size: 20px;">品牌商</font></el-breadcrumb-item>
			  <el-breadcrumb-item><font style="font-size: 20px;">商品分类&主图</font></el-breadcrumb-item>
			</el-breadcrumb>
		</el-row>
		<el-divider></el-divider>
		<el-row justify="center" >
			<el-col :span="2" :offset="2" style="text-align: right;">
				<font style="font-size: 15px;vertical-align: middle;">商品标题:</font>
			</el-col>
			<el-col :span="3">
				<el-input v-model="keyword" placeholder="搜索" size="small">
			</el-col>
			<el-col :span="4">
				</el-input><el-button icon="el-icon-search" size="small" type="primary" @click="Search()">搜索</el-button>
			</el-col>
		</el-row>
		<br>
		<el-row justify="center">
			<el-col :span="20" :offset="3">
				<el-row>
					  <el-table
						v-loading="loading"
						element-loading-text="数据加载中"
						element-loading-spinner="el-icon-loading"
						element-loading-spinner-color="white"
					    :data="ShopData"
						border
						style="width: 100%;">
						<el-table-column
						type="selection"
						width="55">
						</el-table-column>
						<el-table-column
						label="商品id"
						width="180"
						>
						<template slot-scope="scope">
						  {{scope.row.id}}
						</template>
						</el-table-column>
						<el-table-column
						label="商品标题"
						width="180"
						>
						<template slot-scope="scope">
						  {{scope.row.name}}
						</template>
						</el-table-column>
					    <el-table-column
					      label="商品分类"
					      width="180">
					      <template slot-scope="scope">
					        <span style="margin-left: 10px" v-if="scope.row.gc!=null&&scope.row.gc.categoryname!='未分类'">{{ scope.row.gc.categoryname }}</span>
							<span style="margin-left: 10px;color:red" v-else>该商品未分类</span>
					      </template>
					    </el-table-column>
					    <el-table-column
					      label="商品主图"
					      width="180">
					      <template slot-scope="scope">
					        <el-avatar shape="square" size="large" v-if="scope.row.imglist.length>0" :src="serverpath+scope.row.imglist[0].url"></el-avatar>
							<span style="margin-left: 10px;color:red" v-else>该商品未录入图片</span>
					      </template>
					    </el-table-column>
					    <el-table-column label="操作" width="auto">
					      <template slot-scope="scope">
					        <el-button
					          size="mini"
					          @click="UpdateData(scope.row)">编辑</el-button>
					      </template>
					    </el-table-column>
					  </el-table>
				</el-row>
			</el-col>
		</el-row>
		<br />
		<el-row justify="center">
			<el-col :span="10" :offset="7">
				<el-pagination
					background
					@current-change="handleCurrentChange"
					:current-page="CurrentPage"
					:page-size="PageSize"
					layout="total, prev, pager, next, jumper"
					:total="total">
				</el-pagination>
			</el-col>
		</el-row>
		<!-- 录入对话框 -->
<!-- 		<el-dialog title="商品录入" :visible.sync="dialog" >
		  <el-form :model="form" :rules="rules" ref="form">

			<font style="color:red">描述商品的分类</font>
			<el-form-item label="体积重" :label-width="formLabelWidth" prop="weight">
			  <el-input v-model.number="form.weight" autocomplete="off"></el-input>				
			</el-form-item>
			<font style="color:red">描述商品的图片信息</font>
		    <el-form-item label="商品型号" :label-width="formLabelWidth" prop="model">
		      <el-input v-model="form.model" autocomplete="off"></el-input>				
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialog = false">取 消</el-button>
		    <el-button type="primary" @click="submitForm('form')">确 定</el-button>
		  </div>
		</el-dialog> -->
		<!-- 修改对话框 -->
		<!-- 对话框 -->
		<el-dialog :visible.sync="dialog2" :before-close="CloseDialog" >
		  <el-form :model="uform" :rules="rules" ref="uform">
			<el-row justify="center">
				<el-col :span="10" :offset="10">
				<font style="color:black;font-size:20px">商品标题:{{uform.name}}</font>					
				</el-col>
			</el-row>
			<br>
			<font style="color:red">描述商品的分类信息</font>
			<el-form-item label="商品分类" :label-width="formLabelWidth" prop="category">
			  <el-input v-model.number="uform.category" autocomplete="off"></el-input>				
			</el-form-item>
			<font style="color:red">描述商品的图片信息</font>
		    <el-form-item label="商品主图" :label-width="formLabelWidth" prop="fileList" >
		      <el-upload
		        class="upload-demo"
				action=""
		        :on-preview="handlePreview"
				:on-change="handleChange"
				:on-remove="handleRemove"
		        :file-list="uform.fileList"
		        list-type="picture"
				:auto-upload="false">
				<el-button size="small" type="primary">点击上传</el-button>
		      </el-upload>				
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialog2 = false">取消</el-button>
		    <el-button type="primary" @click="submitForm('uform')">确定</el-button>
		  </div>
		</el-dialog>
	</div>
</body>
<script>
	new Vue({
		el: '.app',
		data:function(){
			var fileList = (rule, value, callback) => {
			        if (value.length == 0) {
			          callback(new Error('图片不能为空'));
			        }
					else{
						callback();
					}
			};
			var category = (rule, value, callback) => {
			        if (value == '') {
			          callback(new Error('分类不能为空'));
			        }
					else{
						callback();
					}
					
			};	
			return{
				serverpath:'http://localhost:8011',
				loading:true,
				dialog:false,
				dialog2:false,
				keyword:'',
				CurrentPage:1,
				PageSize:5,
				total:0,
				ShopData:[],
				form: {
				    name: '',
				    model: '',
				    price: '',
					dlperiod: '',
				    weight: '',
				    stock:'',
					fileList:[]
				},
				uform:{
					name:'',
					id:'',
					category:'',
					fileList:[]
				},
				formLabelWidth: '120px',
				rules:{
					fileList:[{validator:fileList,trigger:'change'}],
					category:[{validator:category,trigger:'blur'}]
				}
			}
		},
		methods:{
		  handleEdit(index, row) {
			console.log(index, row);
		  },
		  handleDelete(index, row) {
			console.log(index, row);
		  },
		  //对话框
		  CloseDialog(){
			this.uform.fileList=[];
			this.dialog2 = false;
		  },
		  		  //图片上传功能
		  handleChange(file,fileList){
			this.uform.fileList = fileList;
		  },
		  handleCurrentChange(val){
			  this.CurrentPage = val;
			  this.loadData(this.CurrentPage);
		  },
		  handleRemove(file,fileList){
			  if(file.raw == undefined){
				  var url = "/BMC/deleteImg/"+file.name;
				  axios({
				  method: 'get',//提交方法
				  url: url
				  }).then((res) => {
					console.log(res);
					if(res.data.data == true){
						this.$message({
							message: '成功删除',
							type: 'success'
						});
						this.loadData(this.CurrentPage);
						this.uform.fileList = fileList;
					}
					else{
						this.$message({
							message: '删除失败',
							type: 'error'
						});						
					}
				  });
			  }else{
				this.uform.fileList = fileList;  
			  }
		  },
		  handlePreview(){
		  },
		  //搜索功能
		  Search(){
			this.loadData(1);
		  },
		  ClearData(){
			//重置数据
			  
		  },
		  UpdateData(val){
			this.uform.name = val.name;
			this.uform.id = val.id;
			if(val.gc == null)
			{
				this.uform.category = "未分类";
			}
			else{
				this.uform.category = val.gc.categoryname;
			}
			
			if(val.imglist.length>0)
			{
				this.uform.fileList = [];
				for(var i=0;i<val.imglist.length;i++){
					var filelist = {};
					filelist.name = val.imglist[i].id;
					filelist.url = this.serverpath  +val.imglist[i].url;
					filelist.murl = val.imglist[i].url;
					this.uform.fileList.push(filelist);				
				}
			}
			else{
				this.uform.fileList = [];
			}
			this.dialog2 = true;
		  },
		  submitForm(formName) {
		    this.$refs[formName].validate((valid) => {
		        if (valid) 
				{
					const fdata = new FormData();	
					fdata.append('category',this.uform.category);
					fdata.append("id",this.uform.id);
					for(var i=0;i< this.uform.fileList.length;i++){
						if(this.uform.fileList[i].raw != undefined){
							fdata.append('files',this.uform.fileList[i].raw);
						}
					}
					axios({
					method: 'post',//提交方法
					url: "/BMC/mainpic",
					data:fdata
					}).then((res) => {
						this.uform.fileList = [];
						this.loadData(this.CurrentPage);
						this.dialog2 = false;
						this.$message({
							message: '成功修改',
							type: 'success'
						});
					});
		        } else {

		            return false;
		        }
		    });
			},
		  //加载页面录入数据
		  loadData(CurrentPage){
			  this.loading = true;
			  var url = '';
		      if(this.keyword.length==0){
		        this.keyword+='';
				url = "/BMC/queryPageMain/"+this.CurrentPage+"/"+this.PageSize+"/''";
              }else{
				url = "/BMC/queryPageMain/"+this.CurrentPage+"/"+this.PageSize+"/"+this.keyword;
			  }
			 axios({
			 method: 'get',//提交方法
			 url: url
			 }).then((res) => {
				this.total = res.data.data.total;
				this.ShopData = res.data.data.data;
				// for(var i =0;i<this.ShopData.length;i++){

				// 	if(this.ShopData[i].imglist != null || this.ShopData[i].imglist.length != 0){
				// 		for(var j=0;j<this.ShopData[i].imglist.length;j++){
							
				// 			this.ShopData[i].imglist[j].url = this.serverpath + this.ShopData[i].imglist[j].url;
				// 		}
				// 	}
				// }
				this.loading = false;
			 })
			 }
		},
		created() {
			this.loadData(1);
		}
	})
</script>
</html>
